<template>
    <div class="app-container">
        <!-- 在这里可以打印 switchListInfo 以便调试 -->
        <!-- {{ switchListInfo }} -->
        <div class="cont">
            <el-card class="box-card" v-for="(innerObj, index) in switchListInfo" :key="index">
                <div slot="header" class="clearfix">
                    <span style="font-weight: 700;font-size: 24px;">{{ innerObj.dp_desc }}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="switchInfo(innerObj.dpid)">查看详情</el-button>
                </div>
                <tr>
                    <td class="tdname">DPID: </td>
                    <td>{{ innerObj.dpid }}</td>
                </tr>
                <tr>
                    <td class="tdname">设备名: </td>
                    <td>{{ innerObj.dp_desc }}</td>
                </tr>
                <tr>
                    <td class="tdname">制造商: </td>
                    <td>{{ innerObj.mfr_desc }}</td>
                </tr>
                <tr>
                    <td class="tdname">产品类型: </td>
                    <td>{{ innerObj.hw_desc }}</td>
                </tr>
                <tr>
                    <td class="tdname">系统版本: </td>
                    <td>{{ innerObj.sw_desc }}</td>
                </tr>
                
            </el-card>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Switch2",
    data() {
        return {
            switchList: [],
            switchListInfo: []
        };
    },
    async created() {
    try {
        const switchesRes = await axios.get('/ryu/stats/switches', {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        });
        this.switchList = switchesRes.data;

        for (let dpid of this.switchList) {
            const descRes = await axios.get(`/ryu/stats/desc/${dpid}`, {
                headers: {
                    'Access-Control-Allow-Origin': '*'
                }
            });
            const innerObj = Object.values(descRes.data)[0];
            // 使用从请求中获取的DPID
            innerObj.dpid = dpid;
            this.switchListInfo.push(innerObj);
        }
    } catch (error) {
        console.error(error);
    }
    await this.$message({
      message: '设备加载完成',
      type: 'success'
    });
},
    methods: {
        switchInfo(dpid){
            console.log(dpid);
            this.$router.push({
          path: "/sdnpanel/switchInfo",
          query: { dpid: dpid },
    });

        }
    }
};
</script>

<style>
.box-card {
    width: calc(33.33% - 20px);
    /* 占一行的三分之一，并预留一定的边距 */
    margin: 10px;
    /* 边距 */
    flex: 0 0 auto;
    /* 固定大小，不伸缩 */
}

.cont {
    display: flex;
    flex-wrap: wrap;
    /* 自动换行 */

}
.tdname{
    color: #F56C6C;
}
/* 如果需要针对不同屏幕尺寸进行适配，可以使用媒体查询 */
@media (max-width: 768px) {
    .box-card {
        width: calc(50% - 20px);
        /* 在较小的屏幕上每行两个卡片 */
    }
}

@media (max-width: 480px) {
    .box-card {
        width: 100%;
        /* 在非常小的屏幕上每行一个卡片 */
    }
}
</style>